<template>
  <ga-comment>
    <template #author>
      <ga-progress stroke-width="8" style="width: 180px" :show-text="false" :steps="10" :status="status(percent)"
        :percent="percent / 100" />
    </template>
    <template #content>
      <p>{{ percent?.toFixed(2) }}%</p>
    </template>
  </ga-comment>
</template>

<script setup>
defineProps({
  percent: {
    required: true,
    default: 0
  },
  unit: {
    required: true,
    default: 'GB'
  }
})
const status = (val) => {
  if (val >= 90) {
    return 'danger'
  } if (val >= 60 && val < 90) {
    return 'warning'
  } if (val < 60) {
    return 'success'
  }
}

</script>
